<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台大布局</title>
		<link rel="stylesheet" type="text/css" href="css/scrollbar.css"/>
		<style type="text/css">
			/* 清除body和url的内外边距, 不然出现一些白色的缝 */
			body,
			ul {
				margin: 0;
				padding: 0;
			}

			body,
			a {
				font-size: 14px;
				color: #909399;
				text-decoration: none;
			}

			/* =================================================================== */
			/*  整体布局样式 */
			/* =================================================================== */
			.container {
				display: flex;
				min-height: 100%;
			}

			.left {
				width: 180px;
			}

			.right {
				flex-grow: 1;
				border: none;
			}

			/* 固定整个页面的高度, 为.menu的高度提供计算基准 */
			html,
			body {
				height: 100%;
			}

			/* 整个菜单栏的容器, 它负责渲染背景色, 以及规定边界 */
			.menu {
				background-color: #304156;
				width: 180px;
				height: 100%;
			}

			/* 统一设置菜单栏内的超链接的颜色, 下划线, 以及地盘 */
			.menu a {
				color: #BFCBD9;
				text-decoration: none;
				/* 因为a是行级元素, 它天生占地盘小, 由于后面要设置hover状态下的背景色, 所以地盘太小不好看 */
				display: block;
				padding: 15px;
			}

			/* 设置超链接的鼠标悬停效果(变换背景色) */
			a.menu-item:hover {
				background-color: #263445;
			}

			.sub-menu {
				background-color: #1F2D3D;
				display: none;
			}

			.sub-menu a {
				padding-left: 30px;
			}

			.sub-menu a:hover {
				background-color: #001528;
			}

			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">
				<div class="menu">
					<ul>
						<li>
							<a href="#" class="menu-item">首页</a>
						</li>
						<li>
							<a href="#" class="menu-item">商品</a>
							<ul class="sub-menu">
								<li>
									<a href="product-list.html" target="keng">商品列表</a>
								</li>
								<li>
									<a href="product-add.html" target="keng">添加商品</a>
								</li>
								<li>
									<a href="category-list.html" target="keng">商品分类</a>
								</li>
								<li>
									<a href="category-add.html" target="keng">添加商品分类</a>
								</li>
								<li>
									<a href="">商品类型</a>
								</li>
								<li>
									<a href="">品牌管理</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="menu-item">订单</a>
							<ul class="sub-menu">
								<li>
									<a href="">订单列表</a>
								</li>
								<li>
									<a href="">订单设置</a>
								</li>
								<li>
									<a href="">退货申请处理</a>
								</li>
								<li>
									<a href="">退货原因设置</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="menu-item">营销</a>
							<ul class="sub-menu">
								<li>
									<a href="">秒杀活动列表</a>
								</li>
								<li>
									<a href="">优惠券列表</a>
								</li>
								<li>
									<a href="">品牌推荐</a>
								</li>
								<li>
									<a href="">新品推荐</a>
								</li>
								<li>
									<a href="">人气推荐</a>
								</li>
								<li>
									<a href="">专题推荐</a>
								</li>
								<li>
									<a href="">广告推荐</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="menu-item">权限</a>
							<ul class="sub-menu">
								<li>
									<a href="">用户列表</a>
								</li>
								<li>
									<a href="">角色列表</a>
								</li>
								<li>
									<a href="">菜单列表</a>
								</li>
								<li>
									<a href="">资源列表</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<script type="text/javascript">
					// 所有的一级菜单项的集合
					let menuItems = document.querySelectorAll('.menu-item');
					// 当点击他们中的一员时, 要切换跟在它屁股后面的二级菜单sub-menu的display状态
					for (let i = 0; i < menuItems.length; i++) {
						let menuItem = menuItems[i];
						// 一级菜单被click点击时
						menuItem.addEventListener('click', function() {
							// 拿到这个一级菜单的屁股后面的元素, 这就是对应的二级菜单
							let subMenu = menuItem.nextElementSibling;
							// 获取二级菜单当前的状态
							let currentState = subMenu.style.display;
							// 如果当前状态为none, 这表示当前隐藏着的
							if (!currentState || currentState === 'none') {
								// 就把它显示出来
								subMenu.style.display = 'block';
							} else {
								// 否则就隐藏起来
								subMenu.style.display = 'none';
							}
						});
					}
				</script>
			</div>
			<iframe class="right" name="keng"></iframe>
		</div>
	</body>
</html>
